import React, { useState, useEffect } from "react";
import {
  Button,
  Form,
  Table,
  Pagination,
  Balloon,
  Icon,
  Dialog,
  Message,
  Slider,
  Grid,
  DatePicker,
  Select,
  Input,
} from "@alifd/next";
const FormItem = Form.Item;
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from "@icedesign/form-binder";
const { Row, Col } = Grid;
// import IceContainer from "@icedesign/container";
import styles from "./index.module.scss";
import { useRequest } from "@/utils/request";
import { categoryList, categoryDel, categoryTop } from "@/config/dataSource";
// import TableFilter from "./TableFilter";
// import Zmage from "react-zmage";

export default function Home(props) {
  const { request } = useRequest(categoryList);
  const { request: requestDel } = useRequest(categoryDel);
  const { request: requestTop } = useRequest(categoryTop);
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState(0);
  const [filter, setFilter] = useState({
    outerid: "",
    status: "",
  });
  const [visible, setVisible] = useState(false);
  const [shouldUpdatePosition] = useState(true);
  const [dataSource, setData] = useState([]);
  const [id, setId] = useState("");
  const [value] = useState({
    remark: "",
  });

  const formChange = (formValue) => {
    console.error(formValue);
  };

  const submitBT = (formValue) => {
    if (!formValue.remark) {
      return;
    }
    async function audit() {
      try {
        await requestAuditOrder({
          data: { id: id, status: 5, remark: formValue.remark },
        });
        setVisible(false);
        getList();
      } catch (err) {}
    }
    audit();
  };

  useEffect(() => {
    getList();
  }, [current, filter]);

  const getList = (currPage) => {
    async function getData() {
      try {
        const rsp = await request({
          data: { currPage: currPage ? currPage : current, ...filter },
        });
        setData(rsp.data.obj.list);
        setTotal(rsp.data.obj.totalCount);
      } catch (err) {}
    }
    getData();
  };

  const handleFilterChange = (filter) => {
    let newfilter = { ...filter };
    setFilter(newfilter);
  };

  const handlePagination = (current) => {
    setCurrent(current);
  };
  const handlerDel = (id) => {
    async function audit() {
      try {
        await requestDel({
          data: { id: id },
        });
        getList();
      } catch (err) {}
    }
    Dialog.confirm({
      title: "确认",
      content: "确认执行该操作！",
      onOk: () => audit(),
    });
  };

  const handlerTop = (id) => {
    async function audit() {
      try {
        const rsp = await requestTop({
          data: { id: id },
        });
        getList();
        if (rsp.data.result) {
          Message.success("操作成功");
        } else {
          Message.error(rsp.data.errorMsg);
        }
      } catch (err) {}
    }
    Dialog.confirm({
      title: "确认",
      content: "确认执行该操作！",
      onOk: () => audit(),
    });
  };
  const handlerEdit = (id) => {
    props.history.push("/editArticle/" + id);
  };

  const handlerAdd = () => {
    props.history.push("/addArticle");
  };

  const renderOper = (value, index, record) => {
    return (
      <div style={{ textAlign: "left" }}>
        <div>
          <span
            onClick={() => {
              handlerEdit(record.id);
            }}
            style={{ cursor: "pointer", color: "#5485f7" }}
          >
            编辑
          </span>
          <span
            onClick={() => {
              handlerTop(record.id);
            }}
            style={{ cursor: "pointer", color: "#5485f7", marginLeft: "10px" }}
          >
            {record.added === 1 && (<span style={{color:'red'}}>取消置顶</span>)}
            {record.added === 0 && (<span>置顶</span>)}
            {/* {record.added === 1 ?'取消置顶':'置顶'} */}
          </span>

          <span
            onClick={() => {
              handlerDel(record.id);
            }}
            style={{ cursor: "pointer", color: "#5485f7", marginLeft: "10px" }}
          >
            删除
          </span>
        </div>
      </div>
    );
  };

  return (
    <div>
      {/* <TableFilter onChange={handleFilterChange} /> */}
      <Button
        onClick={() => {
          handlerAdd();
        }}
        type="primary"
      >
        新增
      </Button>
      <div className={styles.tableContainer} style={{ marginTop: "15px" }}>
        <Table
          dataSource={dataSource}
          hasBorder={false}
          className="custom-table"
        >
          <Table.Column title="文章标题" dataIndex="name" />
          <Table.Column title="发布时间" dataIndex="updateDate" />
          <Table.Column
            width={200}
            title="操作"
            dataIndex="id"
            cell={renderOper}
            lock="right"
            align="center"
          />
        </Table>
        <Pagination
          className={styles.pagination}
          current={current}
          total={total}
          onChange={handlePagination}
        />
      </div>
    </div>
  );
}
